<template>
    <ElForm ref="searchFormRef" :model="searchForm" inline class="search-form" label-width="68px" label-position="left">
           <ElFormItem label="数据状态" prop="status">
               <ElSelect
                   v-model="searchForm.status"
                   size="default"
                   placeholder="请选择"
                   clearable=""
                   @change="reset(false)"
               >
                   <ElOption
                       v-for="item in statusList"
                       :key="item.status"
                       :label="item.title"
                       :value="item.status"
                   ></ElOption>

               </ElSelect>
           </ElFormItem>
           <ElFormItem label="物探点号" prop="pointCode">
               <ElInput
                   v-model="searchForm.pointCode"
                   size="default"
                   placeholder="请输入"
               ></ElInput>
           </ElFormItem>

           <ElFormItem label="处理人" prop="userName">
               <ElInput
                   v-model="searchForm.userName"
                   size="default"
                   placeholder="请输入"
               ></ElInput>
           </ElFormItem>
           <ElFormItem label="道路" prop="roadId">
               <ElSelect
               clearable
                   v-model="searchForm.roadId"
                   size="default"
                   filterable
                   placeholder="请选择"
               >
                   <ElOption
                       v-for="item in roadList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"
                   ></ElOption>
               </ElSelect>
           </ElFormItem>

               <ElFormItem label="管线性质" prop="pipeType">
                   <DictSelect
                   size="default"
                   v-model="searchForm.pipeType"
                   clearable
                   :type="DictType.TYPE"
                   placeholder="请选择" />
               </ElFormItem>




           <ElFormItem>
               <ElButton
                   size="default"
                   color="#4371EE"
                   @click="reset(false)"
               >
                   查询
               </ElButton>
               <ElButton
                   size="default"
                   plain=""
                   @click="reset(true)"
               >
                   重置
               </ElButton>
           </ElFormItem>
       </elform>
           <!-- </ElCol> -->
           <div class="btns">
               <ElButton
                   v-show="showButton({ 1: 13, 2:  28}, 'Submit2Approve')"
                   :disabled="disableButton( 'Submit2Approve')"
                   class="add-btn"
                   plain
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'Submit2Approve')"
               >
                   提交审核
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 14, 2:  29}, 'Sendback')"
                   :disabled="disableButton( 'Sendback')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'Sendback')"
               >
                   打回给测绘
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 15, 2:  30},  'Approve')"
                   :disabled="disableButton( 'Approve')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'Approve')"
               >
                   审核通过
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 16, 2:  31}, 'CreateInspect')"
                   :disabled="disableButton( 'CreateInspect')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'CreateInspect')"
               >
                   发起检测
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 17, 2:  32}, 'CreateDredge')"
                   :disabled="disableButton( 'CreateDredge')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'CreateDredge')"
               >
                   发起清淤
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 18, 2:  33})"
                   :disabled="disableButton( 'RecheckOver')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'RecheckOver')"
               >
                   复核完成
               </ElButton>
               <ElButton
                    v-show="showButton({ 1: 57, 2:  58})"
                   :disabled="disableButton( 'Delete')"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="e => handleProcess(e,'Delete')"
               >
                   删除数据
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 62, 2:  63})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   :disabled="disableButton( 'GoAnalyse')"
                   @click="e => handleProcess(e,'GoAnalyse')"
               >
                   转判读
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 19, 2:  34})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="handleExport"
               >
                   导出数据
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 20, 2:  35})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="addShow = true; importText ='管井数据导入'; addForm.projectId=searchForm.projectId"
               >
                   测绘导入
               </ElButton>
               <ElButton
                   v-show="showButton({ 1: 21, 2:  36})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   :disabled="disableButton( 'MakeComplete')"
                   @click="e => handleProcess(e,'MakeComplete')"
               >
                   标记为完成
               </ElButton>
               <!-- <ElButton
                   v-if="dataType === 1"
                   v-show="showButton({ 1: 13, 2:  28})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   size="default"
                   @click="addShow = true; importText ='判读导入'"
               >
                   判读导入
               </ElButton> -->

               <ElButton
                   v-show="showButton({ 1: 54, 2:  55})"
                   plain
                   class="add-btn"
                   color="#4371EE"
                   :icon="Plus"
                   size="default"
                   @click="addDataShow = true"

               >
                   创建数据
               </ElButton>
           </div>
           <ElTable
               border
               id="userTable"
               class="table"
               :data="tableData"
              :height="maxTableHeight"

              @cell-dblclick="doubleClick"
              :row-class-name="tableRowClassName"
              @selection-change="handleSelectionChange"
           >
               <ElTableColumn type="selection" width="55px" fixed="left" />
               <ElTableColumn v-for="(item,index) in tableColumn"
                   :formatter="item.formatter"
                   :showOverflowTooltip="item.showOverflowTooltip"
                :key="index" :fixed ="item.fixed" :prop="item.field" :label="item.label" :width="item.width"
                :tooltip-options ="{
                   trigger: 'click',
                   'popper-class': 'heelo',
                }">
                   <template v-if="item.render" #default="scope">

                       <span >{{ item.render(scope.row) }}</span>
                   </template>
               </ElTableColumn>


               <ElTableColumn  fixed="right" label="操作" width="280">
                   <template #default="scope">
                       <ElButton
                       v-show="showButton({ 1: 25, 2:  40})"
                           link
                           type="text"
                           size="default"
                           @click="editFun(scope.row)"
                       >
                           编辑
                       </ElButton>
                       <ElButton
                       v-show="showButton({ 1: 22, 2:  37})"
                           link
                           type="text"
                           size="default"
                           @click="editFun(scope.row,true)"
                       >
                           写批注
                       </ElButton>
                       <ElButton
                       v-show="showButton({ 1: 24, 2:  39})"
                        link type="text" size="default" @click="goInspect(scope.row)">
                           检测数据
                       </ElButton>
                       <ElButton
                       v-show="showButton({ 1: 23, 2:  38})"
                        link type="text" size="default" @click="goDetail(scope.row)">
                           详情
                       </ElButton>

                   </template>
               </ElTableColumn>
           </ElTable>

           <ElPagination
               class="pagination"
               background
               layout="total,sizes,prev, pager, next,jumper"
               :total="total"
               :current-page="searchForm.pageNum"
               :page-sizes="[10, 20, 50, 100]"
               :page-size="searchForm.pageSize"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
           />


            <!--新增或编辑角色-->
            <ElDialog   class="main-dialog" v-model="addDataShow"  :title="addData.id ? '编辑数据' : '创建数据'" width="580px">
               <div class="dialog-form">
                   <ElForm
                       ref="addDataRef"
                       :model="addData"
                       :rules="rules"
                       label-width="100px"
                       label-position="left"
                   >
                       <ElFormItem label="道路" prop="roadId">
                           <ElSelect
                               v-model="addData.roadId"
                               size="default"
                               filterable
                               placeholder="请选择"
                           >
                               <ElOption
                                   v-for="item in roadList"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id"
                               ></ElOption>
                           </ElSelect>
                       </ElFormItem>
                       <ElFormItem label="井号" prop="code">
                           <el-input v-model="addData.code" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="防坠网" prop="safeGrid">
                           <DictSelect
                               size="default"
                               v-model="addData.safeGrid"
                               clearable
                               :type="DictType.SAFE_GRID"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="管线性质" prop="type">
                           <DictSelect
                               size="default"
                               v-model="addData.type"
                               clearable
                               :type="DictType.TYPE"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="井盖尺寸" prop="lidSize">
                           <el-input v-model="addData.lidSize" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="附属物" prop="appendant">
                           <DictSelect
                               size="default"
                               v-model="addData.appendant"
                               clearable
                               :type="DictType.APPENDANT"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="井圈材质" prop="edgeMaterial">
                           <DictSelect
                               size="default"
                               v-model="addData.edgeMaterial"
                               clearable
                               :type="DictType.EDGE_MATERIAL"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="井底深" prop="bottomDeep">
                           <el-input v-model="addData.bottomDeep" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="井壁状态" prop="wallStatus">
                            <el-input v-model="addData.wallStatus" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="淤泥深" prop="sludgeDeep">
                           <el-input v-model="addData.sludgeDeep" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="井壁材质" prop="wallMaterial">
                           <DictSelect
                               size="default"
                               v-model="addData.wallMaterial"
                               clearable
                               :type="DictType.WALL_MATERIAL"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="井盖埋没" prop="lidBury">
                            <ElSelect v-model="addData.lidBury"  size="default" >
                                <ElOption
                                v-for="item in yesOrNo"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                                />
                            </ElSelect>
                       </ElFormItem>

                       <ElFormItem label="混接" prop="hybrid">
                            <ElSelect v-model="addData.hybrid"  size="default" >
                                <ElOption
                                v-for="item in yesOrNo"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                                />
                            </ElSelect>
                       </ElFormItem>
                       <ElFormItem label="井盖状态" prop="lidStatus">
                           <DictSelect
                               size="default"
                               v-model="addData.lidStatus"
                               clearable
                               :type="DictType.LID_STATUS"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="X" prop="x">
                           <el-input v-model="addData.x" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="Y" prop="y">
                           <el-input v-model="addData.y" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="井盖形状" prop="lidShape">
                           <DictSelect
                               size="default"
                               v-model="addData.lidShape"
                               clearable
                               :type="DictType.LID_SHAPE"
                               placeholder="请选择" />
                       </ElFormItem>

                       <ElFormItem label="井盖材质" prop="lidMaterial">
                           <DictSelect
                               size="default"
                               v-model="addData.lidMaterial"
                               clearable
                               :type="DictType.LID_MATERIAL"
                               placeholder="请选择" />
                       </ElFormItem>
                       <ElFormItem label="地面高程" prop="groundHigh">
                           <el-input v-model="addData.groundHigh" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="井底高程" prop="bottomHigh">
                           <el-input v-model="addData.bottomHigh" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="水深" prop="waterDeep">
                           <el-input v-model="addData.waterDeep" size="default" placeholder="请输入"  />
                       </ElFormItem>
                       <ElFormItem label="特征" prop="feature">
                        <DictSelect
                               size="default"
                               v-model="addData.feature"
                               clearable
                               :type="DictType.FEATURE"
                               placeholder="请选择" />
                       </ElFormItem>


                       <ElFormItem label="备注" prop="remark">
                           <el-input type="textarea" :rows="5" v-model="addData.remark" size="default" placeholder="请输入"  />
                       </ElFormItem>

                   </ElForm>
               </div>
               <template #footer>
                   <span  class="dialog-footer">
                       <ElButton size="default" @click="addDataShow = false">取 消</ElButton>
                       <ElButton color="#4371EE" size="default" @click="submitDataForm(addDataRef)">提 交</ElButton>
                   </span>
               </template>

           </ElDialog>

           <ElDialog   class="main-dialog" v-model="inspectShow"  title="管井检测数据" width="720px">
               <div class="dialog-form">
                <ElForm
                    ref="addFormRef"
                    label-width="110px"
                    label-position="left"
                    :model="inspectData.pipePointInspect" >
                        <ElFormItem label="井号：" prop="code">
                            {{ inspectData.pipePointInspect.code }}
                        </ElFormItem>

                        <ElFormItem label="所属道路：" prop="destCode">
                            {{roadList.find( ({ id }) => id == inspectData.pipePointInspect.roadId).name}}
                        </ElFormItem>
                        <ElFormItem label="防坠网：" prop="safeGrid" :class="[diffInspect('safeGrid') ? 'red' : '']">

                            <DictSelect
                            :disabled="!canEditInspect"
                            size="default"
                            v-model="inspectData.pipePointInspect.safeGrid"
                            clearable
                            :type="DictType.SAFE_GRID"
                            placeholder="请选择" />
                        </ElFormItem>
                        <ElFormItem label="管线性质：" prop="beginDeep" :class="[diffInspect('type') ? 'red' : '']">

                            <DictSelect
                            :disabled="!canEditInspect"
                            size="default"
                            v-model="inspectData.pipePointInspect.type"
                            clearable
                            :type="DictType.TYPE"
                            placeholder="请选择" />
                        </ElFormItem>

                        <ElFormItem label="混接" prop="hybrid">

                            <ElSelect :disabled="!canEditInspect" v-model="inspectData.pipePointInspect.hybrid"  size="default" >
                                <ElOption
                                v-for="item in yesOrNo"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                                />
                            </ElSelect>
                       </ElFormItem>
                       <ElFormItem label="井盖埋没：" prop="lidBury" :class="[diffInspect('lidBury') ? 'red' : '']">

                        <ElSelect :disabled="!canEditInspect" v-model="inspectData.pipePointInspect.lidBury"  size="default" >
                            <ElOption
                            v-for="item in yesOrNo"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                            />
                        </ElSelect>
                        </ElFormItem>
                        <ElFormItem label="井盖材质：" prop="lidMaterial" :class="[diffInspect('lidMaterial') ? 'red' : '']">

                            <DictSelect
                            :disabled="!canEditInspect"
                            size="default"
                            v-model="inspectData.pipePointInspect.lidMaterial"
                            clearable
                            :type="DictType.LID_MATERIAL"
                            placeholder="请选择" />
                            </ElFormItem>


                       <ElFormItem label="井底高程：" prop="bottomHigh" :class="[diffInspect('bottomHigh') ? 'red' : '']">

                           <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipePointInspect.bottomHigh"></ElInput>
                       </ElFormItem>

                       <ElFormItem label="井底埋深：" prop="bottomHigh" :class="[diffInspect('bottomDeep') ? 'red' : '']">

                            <ElInput  size="default" :disabled="!canEditInspect" v-model="inspectData.pipePointInspect.bottomDeep"></ElInput>
                        </ElFormItem>


                       <ElFormItem label="提交时间：" prop="updateTime" >

                           {{inspectData.pipePointInspect.updateTime}}
                       </ElFormItem>
                       <ElFormItem label="备注：" prop="remark" >

                            <ElInput  size="default" :disabled="!canEditInspect" type="texarea" v-model="inspectData.pipePointInspect.remark"></ElInput>
                        </ElFormItem>
                        <ElFormItem label="支线接入标高：" prop="subLineHigh" >
                        </ElFormItem>



                    </ElForm>
                    <ElTable
                        border
                        class="table"
                        :data="inspectData.pipePointInspect.subLineHigh"
                        style="margin-top: 10px;"
                        min-height="250"
                    >
                        <ElTableColumn prop="subLineCode" label="支管方向">
                            <template #default="scope">
                                <ElSelect
                                :disabled="!canEditInspect"
                                size="default"
                                v-model="scope.row.subLineCode"
                                clearable
                                placeholder="请选择"
                                    >
                                    <ElOption
                                        v-for="item in pointList"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></ElOption>
                                </ElSelect>


                            </template>
                        </ElTableColumn>
                        <ElTableColumn prop="subLineValue" label="埋深" >
                            <template #default="scope">
                                <ElInput :controls="false" :disabled="!canEditInspect"     size="default" v-model="scope.row.subLineValue"  @input="scope.row.subLineValue=scope.row.subLineValue.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')"  />
                            </template>
                        </ElTableColumn>

                        <ElTableColumn prop="hybrid" label="是否混接管" >
                            <template #default="scope">
                                <ElSelect :disabled="!canEditInspect" v-model="scope.row.hybrid"  size="default" >
                                    <ElOption
                                    v-for="item in yesOrNo"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                    />
                                </ElSelect>
                            </template>
                        </ElTableColumn>


                        <ElTableColumn label="操作" width="100px">
                            <template #default="scope">
                                <ElButton
                                    link
                                    type="text"
                                    size="default"
                                    @click="inspectData.pipePointInspect.subLineHigh.splice(scope.$index, 1)"
                                >
                                    删除
                                </ElButton>
                            </template>
                        </ElTableColumn>

                    </ElTable>
                    <el-button :disabled="!canEditInspect || inspectData.pipePointInspect.subLineHigh && inspectData.pipePointInspect.subLineHigh.length >= 5"
                      type="primary" style="width: 100%" @click="onAddItem"
                        >添加</el-button
                    >
               </div>
               <template #footer>
                        <span  class="dialog-footer">
                            <ElButton size="default" @click="inspectShow = false">取 消</ElButton>
                            <ElButton color="#4371EE" :disabled="!canEditInspect" size="default" @click="submitInspect">提 交</ElButton>
                        </span>
                    </template>


           </ElDialog>



           <!--新增或编辑角色-->
           <template v-if="addShow">
                <ElDialog v-model="addShow"  :title="importText" width="480px">
                <div class="dialog-form">
                    <ElForm
                        ref="addFormRef"
                        :model="addForm"
                        :rules="rules"
                        label-width="110px"
                        label-position="left"
                    >
                        <ElFormItem label="数据文件" prop="fileName">
                            <div class="uploader">
                                <div :class="[addForm.fileName ? '' : 'empty','btns']">
                                    {{ addForm.fileName ? addForm.fileName : '还未选择文件' }}
                                    <el-icon v-if="addForm.fileName"><CircleCheckFilled /></el-icon>
                                </div>
                                <Upload
                                        ref="uploader"
                                        :autoUpload="false"
                                        :limit="2"
                                        accept=".doc,.DOC,.docx,.DOCX,.pdf,.PDF,.csv,.excel,.xls,XLS,.XLSX,.xlsx,.CSV,.EXCEL"
                                        v-permission="8"
                                        class="upload-demo"
                                        :data="addForm"
                                        url="/ips/pipepoint/importData"
                                        @fileChange="e => addForm.fileName = e"
                                        @success="handleUploadSuccess"
                                        @error="e => { loading.close()}"
                                    >
                                        <ElButton    link type="text" size="default" >
                                            选择文件
                                        </ElButton>
                                    </Upload>
                                </div>
                        </ElFormItem>


                        <ElFormItem label="所属道路" prop="roadId">
                            <ElSelect
                               v-model="addForm.roadId"
                                size="default"
                                filterable
                                placeholder="请选择"
                                >
                                <ElOption
                                    v-for="item in roadList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></ElOption>
                            </ElSelect>
                        </ElFormItem>
                    </ElForm>
                </div>
                <template #footer>
                    <span  class="dialog-footer">
                        <ElButton size="default" @click="addShow = false">取 消</ElButton>
                        <ElButton color="#4371EE" size="default" @click="submitForm(addFormRef)">提 交</ElButton>
                    </span>
                </template>

            </ElDialog>
           </template>


           <ElDialog   class="main-dialog" v-model="addTest"  title="发起检测" width="480px">
               <div class="dialog-form">
                   <ElForm
                       ref="addTestRef"
                       :model="addTestUser"
                       label-width="80px"
                       label-position="left"
                   >

                       <ElFormItem label="检测人" :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
                           <ElSelect
                               v-model="addTestUser.user"
                               value-key="userId"
                               size="default"
                               placeholder="请选择"
                           >
                           <ElOption
                               v-for="item in allUserList"
                               :key="item.userId"
                               :label="`${item.realName}(${item.belongRole})`"
                               :value="item"
                           ></ElOption>


                           </ElSelect>
                       </ElFormItem>
                   </ElForm>
               </div>
               <template #footer>
                   <span  class="dialog-footer">
                       <ElButton size="default" @click="addTest = false">取 消</ElButton>
                       <ElButton color="#4371EE" size="default" @click="submitTest(addTestRef,'CreateInspect')">提 交</ElButton>
                   </span>
               </template>

           </ElDialog>
           <ElDialog   class="main-dialog" v-model="addClean"  title="发起清淤" width="480px">
               <div class="dialog-form">
                   <ElForm
                       ref="addCleanRef"
                       :model="addTestUser"
                       label-width="80px"
                       label-position="left"
                   >

                   <ElFormItem label="清淤人" :rules="{ required: true, message: '请选择人员', trigger: 'change' }">
                           <ElSelect
                               v-model="addTestUser.user"
                               value-key="userId"
                               size="default"
                               placeholder="请选择"
                           >
                           <ElOption
                               v-for="item in allUserList"
                               :key="item.userId"
                               :label="`${item.realName}(${item.belongRole})`"
                               :value="item"
                           ></ElOption>


                           </ElSelect>
                       </ElFormItem>
                   </ElForm>
               </div>
               <template #footer>
                   <span  class="dialog-footer">
                       <ElButton size="default" @click="addClean = false">取 消</ElButton>
                       <ElButton color="#4371EE" size="default" @click="submitTest(addCleanRef,'CreateDredge')">提 交</ElButton>
                   </span>
               </template>

           </ElDialog>

           <ElDialog   class="main-dialog" v-model="addRemark"  title="写批注" width="480px">
               <div class="dialog-form">
                   <ElForm
                       ref="addRemarkRef"
                       :model="addData"
                       :rules="rules"
                       label-width="60x"
                       label-position="left"
                   >

                       <ElFormItem label="批注">
                           <ElInput
                               v-model="addData.shortRemark"
                               type="textarea"
                               :row="7"
                               size="default"
                               placeholder="请输入"
                           >
                           </ElInput>
                       </ElFormItem>
                   </ElForm>
               </div>
               <template #footer>
                   <span  class="dialog-footer">
                       <ElButton size="default" @click="addRemark = false">取 消</ElButton>
                       <ElButton color="#4371EE" size="default" @click="submitDataForm(addRemarkRef)">提 交</ElButton>
                   </span>
               </template>

           </ElDialog>


           <ElDialog   class="main-dialog" v-model="detailShow"  title="数据详情" width="720px">
               <div class="dialog-form">
                   <ul class="details">
                       <li class="details-item"><label>特探点号：</label> {{ details.code }}</li>
                       <li class="details-item"><label>所属道路：</label> {{roadList.find( ({ id }) => id == details.roadId).name}}</li>
                       <li class="details-item"><label>管线性质：</label> {{ typeTranslate({},{} ,details.type) }}</li>
                       <li class="details-item"><label>数据状态：</label> {{ statusList.find( ({ status }) => status == details.status).title}} </li>
                       <li class="details-item"><label>当前处理人：</label> {{ details.userName }}</li>
                       <li class="details-item"><label>初始导入时间：</label> {{ details.createTime }}</li>
                       <li class="details-item"><label>最后处理时间：</label> {{ details.updateTime }}</li>

                       <li class="details-item"><label>处理记录：</label> </li>
                   </ul>
                   <ElTable
                       border
                       class="table"
                       :data="details.processLogs"
                       style="margin-top: 10px;"
                   >
                       <ElTableColumn prop="createTime" label="时间" width="150" />
                       <ElTableColumn prop="processStatus" label="状态" >
                       </ElTableColumn>
                       <ElTableColumn prop="processName" label="操作名" />
                       <ElTableColumn prop="processUserName" label="操作人" />
                       <ElTableColumn prop="remark" label="批注" width="200px">
                            <template #default="scope">
                                {{scope.row.remark}}
                                <template v-if="scope.row.photoUrl">
                                    <el-button type="text" @click="handleviewer(scope.row.photoUrl)">查看图片</el-button>
                                </template>
                            </template>
                        </ElTableColumn>
                   </ElTable>

               </div>

           </ElDialog>
           <ElImageViewer v-if="showViewer" :initialIndex="initialIndex" @close="e => showViewer = false" :urlList="urlList" />
</template>

<script setup lang="ts">
import { DictType } from '@/components/DictSelect/localDictDefine';
import useTableSetting from '@/hooks/useTableSetting';
import { ref, onMounted, reactive, nextTick, computed, watch, toRefs } from 'vue';

import { ElMessage, ElTree, FormInstance, ElMessageBox, ElLoading } from 'element-plus';
import { useMenuStore } from '@/store/app';
import { getFlatDeepTreeData, exportFromUrl } from '@/utils/common';
import { Search, Plus, CircleCheckFilled, MessageBox, Message } from '@element-plus/icons-vue';
import { validateForm } from '@/helper/index';
import { getpipePointData, getpipePointDetail, getRoadList, userList, createpipePoint, batchUpadatepipePoint, getLoginUserProjects, getUserDataStatus, getStatusActionMaps, pipePointProcess,getCombDetailPoint, savePointData, exportPointData,
    listByPoint
} from '@/api/index';
import useDictData from '@/components/DictSelect/useDictData';
const props = defineProps<{
   dataType: number,
   statusList: []
}>();

const yesOrNo = ref([
    {value: 0, label: '否'},
    {value: 1, label: '是'},
]);

const { dataType, statusList} = toRefs(props);

const { maxTableHeight, setTableMaxHeight } = useTableSetting({ id: 'userTable', offsetBottom: 92 });

const setTable = () => {
    maxTableHeight.value = setTableMaxHeight('userTable', 92);
};
const searchForm = reactive({

    'pipeType': '',
    'pointCode': '',
    'projectId': '',
    'roadId': '',
    'status': '',
    'userName': '',
    pageNum: 1,
    pageSize: 20,
});

const addRemarkRef = ref(null);
const { tableDictFilter: typeTranslate } = useDictData({
    type: DictType.TYPE,
});

const { tableDictFilter: subLineHighTranslate } = useDictData({
    type: DictType.SUB_LINE_HEIGHT,
});


const { tableDictFilter: pipeTranslate } = useDictData({
    type: DictType.PIPE_MATERIAL,
});
const { tableDictFilter: derectionTranslate } = useDictData({
    type: DictType.DIRECTION,
});
const { tableDictFilter: buryTranslate } = useDictData({
    type: DictType.BURY_TYPE,
});
const { tableDictFilter: featureTranslate } = useDictData({
    type: DictType.FEATURE,
});

const { tableDictFilter: appendantTranslate } = useDictData({
    type: DictType.APPENDANT,
});

const { tableDictFilter: lidMaterialTranslate } = useDictData({
    type: DictType.LID_MATERIAL,
});
const { tableDictFilter: lidStatusTranslate } = useDictData({
    type: DictType.LID_STATUS,
});

const { tableDictFilter: lidShapeTranslate } = useDictData({
    type: DictType.LID_SHAPE,
});

const { tableDictFilter: safeGridTranslate } = useDictData({
    type: DictType.SAFE_GRID,
});

const { tableDictFilter: edgeMaterialTranslate } = useDictData({
    type: DictType.EDGE_MATERIAL,
});
const { tableDictFilter: wallMaterialTranslate } = useDictData({
    type: DictType.WALL_MATERIAL,
});
const { tableDictFilter: wallStatusTranslate } = useDictData({
    type: DictType.WALL_MATERIAL,
});



const addTestUser = reactive({
    user: {}
});

const activeProject = ref('first');



const allUserList = ref([]);

const getAllUserList = async () => {
    const res = await userList( { pageNum: 1, pageSize: 10000});
    allUserList.value = res.list;
};

getAllUserList();



const store = useMenuStore();



const roadList= ref([]);



const multipleSelection = ref([]);

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val;
};

const handleMultiple = async (e, processName ) => {
    if(!multipleSelection.value.length) {
        ElMessage.error('请选择数据');
        return Promise.reject();
    }
    if(processName == 'CreateInspect'||  processName == 'CreateDredge') {
        if(searchForm.status == 21 || searchForm.status == 31) {
            const str = searchForm.status == 21 ? '检测中' : '清淤中'
            await ElMessageBox.confirm(`选所数据正在${str}，重新分配会导致已完成的外业数据归零，是否确认要操作？`, '提示', {
                confirmButtonText: '确  定',
                cancelButtonText: '取  消',
                dangerouslyUseHTMLString: true
            });
        }

    } else  {
        await ElMessageBox.confirm(`确认要将选中的 <span style="color:#FB3B3F;">${multipleSelection.value.length}</span> 条数据${e.target.innerText}吗？`, e.target.innerText, {
            confirmButtonText: '确  定',
            cancelButtonText: '取  消',
            dangerouslyUseHTMLString: true
        });
    }

};



const tableColumn = computed(() => {
    const temp_1 = [
    { label: '道路', field: 'roadId', width: '120px',
            render: (row) => roadList.value.find( ({ id }) => id == row.roadId).name },
        { label: '物探点号', field: 'code', width: '120px'},
        { label: '数据状态', field: 'status', width: '80px',render: (row) => statusList.value.find( ({ status }) => status == row.status).title },
        { label: '处理人', field: 'userName', width: '80px'},
        { label: '管线性质', field: 'type', width: '140px', formatter: typeTranslate},
        { label: '特征', field: 'feature', width: '140px',formatter: featureTranslate, edit: true,fixed: false},
        { label: '附属物', field: 'appendant', width: '140px', formatter: appendantTranslate, edit: true,fixed: false},
        { label: '井底埋深', field: 'bottomDeep', width: '140px', edit: true,fixed: false},
        { label: '水深', field: 'waterDeep', width: '140px', edit: true,fixed: false},
        { label: 'X', field: 'x', width: '140px', edit: true,fixed: false},
        { label: 'Y', field: 'y', width: '140px', edit: true,fixed: false},
        { label: '防坠网', field: 'safeGrid', width: '140px', edit: true,formatter: safeGridTranslate,fixed: false},
        { label: '地面高程', field: 'groundHigh', width: '140px', edit: true,fixed: false},
        { label: '井底高程', field: 'bottomHigh', width: '140px', edit: true,fixed: false},
        { label: '淤泥深', field: 'sludgeDeep', width: '140px', edit: true,fixed: false},
        { label: '井壁状态', field: 'lidStatus', width: '140px', edit: true,formatter: lidStatusTranslate,fixed: false},
        { label: '井壁材质', field: 'wallMaterial', width: '140px', edit: true,formatter: wallMaterialTranslate,fixed: false},
        { label: '井圈材质', field: 'edgeMaterial', width: '140px', edit: true,formatter: edgeMaterialTranslate,fixed: false},
        { label: '井盖状态', field: 'lidStatus', width: '140px', edit: true,formatter: lidStatusTranslate,fixed: false},
        { label: '井盖形状', field: 'lidShape', width: '140px', edit: true,formatter: lidShapeTranslate,fixed: false},
        { label: '井盖材质', field: 'lidMaterial', width: '140px',formatter: lidMaterialTranslate, edit: true,fixed: false},
        { label: '井盖尺寸', field: 'lidSize', width: '140px', edit: true,fixed: false},
        { label: '井盖埋没', field: 'lidBury', width: '140px', edit: true,fixed: false, render: (row) => !isNaN(parseInt(row.lidBury)) ? yesOrNo.value.find( ({ value }) => value == row.lidBury).label : '' },
        { label: '混接', field: 'lidBury', width: '140px', edit: true,fixed: false, render: (row) => !isNaN(parseInt(row.hybrid)) ? yesOrNo.value.find( ({ value }) => value == row.hybrid).label : '' },
        { label: '备注', field: 'remark', width: '250px', edit: true,fixed: false, showOverflowTooltip: true},

    ];

    const temp_2 = [
        { label: '道路', field: 'roadId', width: '120px',
            render: (row) => roadList.value.find( ({ id }) => id == row.roadId).name },
        { label: '起止点号', field: 'beginCode', width: '120px', render: (row) => row.beginCode + '-' + row.destCode },
        { label: '数据状态', field: 'status', width: '80px',render: (row) => statusList.value.find( ({ status }) => status == row.status).title },
        { label: '处理人', field: 'userName', width: '80px',},
        { label: '管线性质', field: 'type', width: '140px', formatter: typeTranslate},
        { label: '起点埋深', field: 'beginDeep', width: '140px', edit: true},
        { label: '终点埋深', field: 'destDeep', width: '140px', edit: true},
        { label: '起点管底高程', field: 'beginBottomHigh', width: '140px', edit: true},
        { label: '终点管底高程', field: 'destBottomHigh', width: '140px', edit: true},
        { label: '管线长度', field: 'length', width: '140px', edit: true},
        { label: '管径', field: 'diameter', width: '140px', edit: true},
        { label: '材质', field: 'pipeMaterial', width: '140px',formatter: pipeTranslate, edit: true},
        { label: '流向', field: 'direction', width: '140px', formatter: derectionTranslate,edit: true},
        { label: '埋设类型', field: 'buryType', width: '140px', formatter: buryTranslate, edit: true},
        { label: '备注', field: 'remark', width: '250px', edit: true, showOverflowTooltip: true},

    ];


    return dataType.value === 1 ? temp_1 : temp_2;
});

const doubleClick = (row, column, cell) => {
    console.log(row,column, cell);
    row[column.property+'Show'] = true;
    setTimeout(() => {
        inputRefMap.value[`Input_Ref_${column.property}_${row.id}`].input.focus();
    },100);

};

const tableRowClassName = ({row, rowIndex}) => {
    if(row.inspectDiff > 0) {
        return 'error-row';
    }
    return '';
};
const inputRefMap = ref({});

/** 动态设置Input Ref */
const handleSetInputMap = (el: refItem, key: number, id) => {
    if (el) {
        inputRefMap.value[`Input_Ref_${key}_${id}`] = el;
    }
};


const tableData: any = ref([
]);
const addRemark = ref<boolean>(false);
const addShow = ref<boolean>(false);
const addTest = ref<boolean>(false);
const addClean = ref<boolean>(false);
const total = ref<number>(0);
const isEdit = ref<boolean>(false);
const showRoot = ref<boolean>(false);
const currentRole: any = ref('');
const addFormRef = ref<FormInstance>(null);
const searchFormRef = ref<FormInstance>(null);

const addTestRef= ref<FormInstance>(null);
const addCleanRef= ref<FormInstance>(null);



const addForm = reactive({
    roadId: '',
    projectId: '',
    fileName:''
});

const rules = reactive({
    fileName: [{ required: true, message: '请选择数据文件', trigger: 'blur' }],
    roadId: [{ required: true, message: '请选择道路', trigger: 'blur' }],
});



const getList = async () => {
    try {
        const res: any = await getpipePointData(searchForm);
        tableData.value = res.list;
        total.value = res.total;
    } catch (err) {}
};



const reset = (reset) => {
    if(reset) {
        searchFormRef.value.resetFields();
        searchForm.status = statusList.value[0].status;
    }
    searchForm.pageNum = 1;
    getList();
};

const handleSizeChange = (rows: number) => {
    searchForm.pageNum = 1;
    searchForm.pageSize = rows;
    getList();
};
const handleCurrentChange = (page: number) => {
    searchForm.pageNum = page;
    getList();
};






const detailShow = ref(false);
const details = ref(
    {
        id: 1,
        code: 'xc-001',
        name: '测试项目',
        unit: '单位名称',
        date: '2023-09-10',
        user: '张三',
        kaigong: '2023-09-10',
        phone: '1277001122',
        status: 1,
    }
);

const goDetail = async (row) => {
    details.value = await getpipePointDetail({ pointId: row.id});
    detailShow.value = true;

};

const inspectShow = ref(false);
const inspectData = reactive({
    pipePoint: null,
    pipePointInspect: null
});

const pointList = ref([])

const goInspect = async (row) => {
    const {pipePoint, pipePointInspect } = await getCombDetailPoint({ pointId: row.id});
    if(!pipePointInspect) {
        return ElMessage.error('没有检测数据！');
    }
    const pointData =  await listByPoint({
        projectId:searchForm.projectId,
        type: pipePointInspect.type,
        pointCode: pipePointInspect.code
    })
    pointList.value = pointData.map(({ destCode, beginCode}) => pipePointInspect.code == destCode ? beginCode : destCode )
    inspectData.pipePoint = pipePoint;
    inspectData.pipePointInspect = pipePointInspect;
    inspectShow.value = true;
    // detailShow.value = true;

};





const resetForm = (form) => {
    Object.keys(form).forEach(key => form[key] = '');
};

const addDataShow = ref(false);
const addDataRef = ref(null);
const addData = reactive({
    id: '',
    'appendant': '',
    'bottomDeep': '',
    'bottomHigh': '',
    'code': '',
    'edgeMaterial': '',
    'feature': '',
    'groundHigh': '',
    'hybrid': '',
    'lidBury': '',
    'lidMaterial': '',
    'lidShape': '',
    'lidSize': '',
    'lidStatus': '',
    'projectId': '',
    'remark': '',
    'roadId': '',
    'safeGrid': '',
    'sludgeDeep': '',
    'status': '',
    'type': '',
    'wallMaterial': '',
    'wallStatus': '',
    'waterDeep': '',
    'x': '',
    'y': '',
    shortRemark: ''
});

const editFun = async (row: any, isAddRemark = false) => {
    if(isAddRemark) {
        addRemark.value= true;
    } else {
        addDataShow.value = true;
    }
    Object.keys(row).forEach(key => {
        if(key in addData) {
            addData[key] = row[key];
        }
    });


};


const submitDataForm = async (formEl: FormInstance | undefined) => {
    await validateForm(formEl);
    const params = {
        ...addData,
        projectId: searchForm.projectId
    };
    addData.id ? await batchUpadatepipePoint([params]) : await createpipePoint(params);
    ElMessage.success('提交成功！');
    addDataShow.value = false;
    addRemark.value = false;
    getList();
};




watch(
    addDataShow,
    val => {
        if(!val) {
            addDataRef.value.clearValidate();
            resetForm(addData);
        }
    }
);



const statusMap = ref({});

const canEditInspect = computed (() =>  {
    const authObj = {
        1: 59,
        2: 60
    }
    const targeKey = authObj[dataType.value];
    return store.buttonList.some(({ id }) => id == targeKey);
});

const showButton = computed (() => (authObj, key) => {
    const targeKey = authObj[dataType.value];
    return store.buttonList.some(({ id }) => id == targeKey);
});
const diffInspect = computed (() => ( key) => {
    const { pipePointInspect, pipePoint} = inspectData;
    return pipePointInspect[key] != pipePoint[key];
});

const disableButton = computed (() => key =>
    !(statusMap.value[searchForm.status] && statusMap.value[searchForm.status].includes(key))
);



const getStatusMap = async () => {
    statusMap.value = await getStatusActionMaps();

};
getStatusMap();


const handleProcess = async (e, processName) => {
    await handleMultiple(e, processName);
    if(processName === 'CreateInspect') {
        addTest.value = true;
        return;
    }
    if(processName === 'CreateDredge') {
        addClean.value = true;
        return;
    }
    const params = {
        idList: multipleSelection.value.map(({id}) => id),
        processName
    };
    let loading = ElLoading.service({ text: '处理中...'})
    try {
        await pipePointProcess(params);
        ElMessage.success(e.target.innerText + '成功！');
        multipleSelection.value = [];
        getList();
    } finally {
        loading.close()
    }
};


const handleProcess2 = async (processName) => {

    const params = {
        idList: multipleSelection.value.map(({id}) => id),
        processName,
        nextUserId: addTestUser.user.userId,
        nextUserName: addTestUser.user.realName,

    };
    await pipePointProcess(params);
    ElMessage.success('操作成功！');
    multipleSelection.value = [];
    getList();
};



const submitTest = async (form, key) => {
    await validateForm(form);
    await handleProcess2(key);
    addTest.value = false;
    addClean.value = false;
    addTestUser.user = {};
};

const getRoad = async () => {
    const res: any = await getRoadList({ pageNum: 1, pageSize: 10000, projectId: searchForm.projectId});
    roadList.value = res.list;
};



const tabClick = () => {
    getRoad();
    searchForm.roadId = null;
    reset(true);
};

const initialIndex = ref(0)
const showViewer = ref(false)
const urlList = ref([])
const handleviewer = (urlLister) => {
    const urls = urlLister.split(',')
    urlList.value = urls
    showViewer.value = true;
}

const uploader = ref(null)

let loading = null


const submitForm = async (formEl: FormInstance | undefined) => {
    await validateForm(formEl)
    loading = ElLoading.service({ text: '导入中...'})
    await uploader.value?.submit()

  //  await validateForm(formEl);
//   const params = {
//     roadId: addForm.roadId,
//     projectId:searchForm.projectId
//   }
};

const handleUploadSuccess = (name, data) => {
    ElMessage.success(`成功导入${data}条数据`)
    loading.close()
    addShow.value = false;
    getList()
}


const submitInspect = async (formEl: FormInstance | undefined) => {
    const params = {
        ...inspectData.pipePointInspect,
        operationMode: 2
    }
    await savePointData(params)
    inspectShow.value = false;
    ElMessage.success('提交成功！');
    getList();
}


const onAddItem = async () => {

    if(!inspectData.pipePointInspect.subLineHigh) {
        inspectData.pipePointInspect.subLineHigh = [ {
            subLineCode : null,
            subLineValue : null,
            hybrid:null,

        }]
    }else {
        inspectData.pipePointInspect.subLineHigh.push({
            subLineCode : null,
            subLineValue : null,
            hybrid:null,
        })
    }
};

const handleExport = async() => {

    let params = {};
    let msg = ''
    if(multipleSelection.value.length) {
        params.ids = multipleSelection.value.map(({id}) => id);
        msg = '是否导出选中的数据'
    }else {
        params = {
            ...searchForm
        }
        msg = '是否导出当前页数据?'
    }
    await ElMessageBox.confirm(msg, '提示', {
        confirmButtonText: '确  定',
        cancelButtonText: '取  消',
    });
    let loading = ElLoading.service({
        lock: true,
        text: '处理中...',
    });
    try {
        const url = await exportPointData(params)
        await exportFromUrl(url)
        getList()
    } finally {
        loading.close()
    }
}



watch(
    addShow,
    val => {
        if(!val) {
            resetForm(addForm);
        }
    }
);

defineExpose({
    setTable,
    tabClick,
    searchForm,
    getRoad,
    getList,
    reset
});

</script>

<style scoped lang="scss">
.details{
   display: flex;
   align-items: center;
   flex-flow: wrap;
   .details-item{

       margin-top: 10px;
       width: 50%;

   }
}
.uploader{
   width: 100%;
   display: flex;
   align-items: center;
   .btns{
       padding: 0 10px;
       margin-right: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       color:#1B1B1E;
       height: 32px;
       border: 1px solid #DCDCDC;
       border-radius: 3px;
       flex: 1;
       &.empty{
           color:#91949F
       }
       .el-icon{
           color:#2EB68D;
       }
   }
}
.main-content > .btns{
   margin:10px 0 20px;
}
.search-form{
  ::v-deep(){
   .el-input,.el-select{
       width: 265px !important;
   }
  }
}
.data-type {
   padding: 5px 0 20px;
   display: flex;
   .tab-button{
       cursor: pointer;
       padding: 8px 15px;
       background: #E4E5EA;
       border-radius: 3px;
       &.active{
           color: #4371EE;
           background: #D9E3FC;
       }
       & + .tab-button{
           margin-left: 20px;
       }
   }
}
::v-deep(.el-popper){
   max-width: 400px;
}
.red ::v-deep(.el-input__inner){
    color:red;
}
.el-dialog .el-button--text{
    padding: 0;
}
</style>
